<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>登录</title>
    <jsp:include page="common/common_css.jsp"/>
    <style>
        .image {
            margin-top: -100px;
        }
    </style>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui teal image header">
            <img src="../images/logo.jpg" class="image">
            <div class="content">
                登录
            </div>
        </h2>
        <jsp:include page="common/message.jsp"/>
        <form class="ui large form" action="${pageContext.request.contextPath}/login" method="post">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="username" placeholder="邮箱">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" placeholder="密码">
                    </div>
                </div>
                <div id="JS-field-code" class="field">
                </div>
                <div class="ui fluid large teal submit button">登录</div>
                <div class="ui error message"></div>
            </div>
        </form>
        <div style="text-align: right">
            <a href="${pageContext.request.contextPath}/user/forgetPsd">忘记密码</a>
        </div>
    </div>
</div>

<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        $('.ui.form')
            .form({
                fields: {
                    email: {
                        identifier: 'username',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请输入邮箱。'
                            },
                            {
                                type: 'email',
                                prompt: '请输入有效邮箱。'
                            }
                        ]
                    },
                    password: {
                        identifier: 'password',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '请输入密码。'
                            },
                            {
                                type: 'length[6]',
                                prompt: '请输入6位长度的密码。'
                            }
                        ]
                    }
                },
                onSuccess: function () {
                    if ($('.ui.form .submit.button').hasClass("loading")) {
                        return false;
                    }
                    var username = $("input[name=username]").val();
                    var password = $("input[name=password]").val();
                    var params = {username: username, password: password}
                    if ($('#JS-btn-code').length) {
                        var verificationCode = $("input[name=verificationCode]").val();
                        if (verificationCode.trim() == '') {
                            $('form').form("add errors", ['请输入验证码！']);
                            return false;
                        }
                        params.verificationCode = verificationCode;
                    }
                    $('.ui.form .submit.button').addClass("loading");
                    common.ajax({
                        url: ROOT + "/login",
                        type: 'post',
                        data: params,
                        dataType: 'json',
                        success: function (data) {
                            if (data) {
                                IM.login(data, password, {
                                    success: function () {
                                        window.location.replace(ROOT + "/");
                                    },
                                    error: function () {
                                        $('form').form("add errors", ['登录失败！']);
                                        $.removeCookie("JSESSIONID");
                                        $('.ui.form .submit.button').removeClass("loading");
                                    }
                                });
                            } else {
                                window.location.replace(ROOT + "/");
                            }
                        },
                        error: function (data) {
                            $('.ui.form .submit.button').removeClass("loading");
                            if (data && data.code == -4) {
                                if ($('#JS-btn-code').length) {
                                    alert(data.errorMsg);
                                    $('#JS-btn-code').click();
                                } else {
                                    $('#JS-field-code').html(' <div class="ui fluid action input">' +
                                        '                        <input type="text" name="verificationCode" placeholder="请输入验证码">' +
                                        '                        <div id="JS-btn-code" class="ui button" style="padding: 0px;">' +
                                        '                            <img style="width: 63px;height: 37px;" src="/code?">' +
                                        '                        </div>' +
                                        '                    </div>');
                                    $('#JS-btn-code').click(function () {
                                        var $img = $(this).find('img');
                                        $img.prop('src', $img.prop('src').split('?')[0] + '?' + new Date().valueOf());
                                    });
                                }
                            }
                        }
                    });
                    return false;
                }
            });
    });
</script>
</body>
</html>
